<template>
    <div class="map">

        <div class="mask" v-show="show">
            <div class="wrapper" @click.stop>
                <div class="map-box">
                    <div id="allmap" ref="allmap"></div>

                    <van-button type="danger" size="large" @click="confirmPosition">确定</van-button>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            map: null,
            show: false,
            store: {
                "id": null,
                "name": "",
                "img": "",
                "storekeeperId": "",
                "province": "",
                "city": "",
                "region": "",
                "address": "",
                "longitude": "",
                "latitude": "",
                "phoneNumber": "",
                "score": null,
                "minPrice": null,
                "shippingFee": "",
                "intro": "",
            },
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.createMap()
            }
        }
    },
    mounted() {
        let latitude = this.$store.state.location.latitude
        let longitude = this.$store.state.location.longitude

        if (!latitude || !longitude) this.show = true

    },
    methods: {
        createMap() {

            if (this.map != null) return

            this.map = new BMapGL.Map("allmap");
            this.map.centerAndZoom(new BMapGL.Point(112.00930278223244, 27.71749883067181), 18);
            this.map.enableScrollWheelZoom(true);
            this.map.enableDragging()

            let map = this.map
            let that = this

            // =====定位
            let geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    let mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
            });


            let geoc = new BMapGL.Geocoder();
            this.map.addEventListener('click', function (e) {
                that.store.longitude = e.latlng.lng
                that.store.latitude = e.latlng.lat

                let pt = e.latlng;

                map.clearOverlays();

                let marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
                map.addOverlay(marker);

                geoc.getLocation(pt, function (rs) {
                    let addComp = rs.addressComponents;

                    console.log(addComp, "addComp")

                    that.store.province = addComp.province
                    that.store.city = addComp.city
                    that.store.region = addComp.district
                    that.store.address = addComp.street + addComp.streetNumber
                })
            });

        },
        confirmPosition() {
            this.show = false

            let longitude = this.store.longitude
            let latitude = this.store.latitude

            let data = {
                longitude,
                latitude
            }

            this.$store.commit('setLocation', data)
        },
    }
}
</script>

<style scoped>

.mask{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;

    background-color:rgb(0, 0, 0, 0.7);
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.map-box {
    background-color: white;
    padding: 15px;

    border-radius: 8px;

}

#allmap {
    width: 300px;
    height: 300px;

    margin: auto;

    margin-bottom: 10px
}
</style>